<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" th:href="@{/static/css/normalize.css}">
<link rel="stylesheet" th:href="@{/static/css/main.css}" media="screen" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
<link rel="stylesheet" th:href="@{/static/css/style-portfolio.css}">
<link rel="stylesheet" th:href="@{/static/css/picto-foundry-food.css}" />
<link rel="stylesheet" th:href="@{/static/css/jquery-ui.css}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
<link rel="icon" th:href="@{/static/favicon-1.ico}" type="image/x-icon">
</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="row">
		<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">June 19 Coffee</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav main-nav  clear navbar-right ">
					<li><a class="navactive color_animation" data-toggle="modal" data-target="#login">登录</a></li>
					<li><a class="color_animation" data-toggle="modal" data-target="#regist">注册</a></li>
				</ul>
			</div><!-- /.navbar-collapse -->
		</div>
	</div><!-- /.container-fluid -->
</nav>

 <!-- 模态框（登录） -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					来登录丫！
				</h4>
			</div>
			<div >
				<h3 style="color: #c9302c" th:text="${message}"></h3>
			</div>
			<div class="modal-footer">
				 <!-- 模态框（登录表单） -->
				<form class="form-horizontal" role="form" action="/login" method="post">
					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label">id</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="firstname" name ="username"
								   placeholder="请输入id">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="lastname" name = "password"
								   placeholder="请输入密码">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="submit" class="btn btn-default">登录</button>
						</div>
					</div>
				</form>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
 
 
  <!-- 模态框（注册） -->
<div class="modal fade" id="regist" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					来注册丫！
				</h4>
				<div >
					<h3 style="color: #c9302c" th:text="${message}"></h3>
				</div>
			</div>
			<div class="modal-footer">
				 <!-- 模态框（注册表单） -->
				<form class="form-horizontal" role="form" action="/regist" method="post">
					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label">id</label>
						<div class="col-sm-10">
							<input type="text" class="form-control"  name ="id"
								   placeholder="请输入id">
						</div>
					</div>
					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label">昵称</label>
						<div class="col-sm-10">
							<input type="text" class="form-control"  name ="name"
								   placeholder="就是你想叫啥">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control"  name = "password"
								   placeholder="请输入密码">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="submit" class="btn btn-default">注册</button>
						</div>
					</div>
				</form>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
 
<div id="top" class="starter_container bg">
	<div class="follow_container">
		<div class="col-md-6 col-md-offset-3">
			<h2 class="top-title"> June 19 Coffee</h2>
			<h2 class="white second-title">" is the daily drink"</h2>
			<hr>
		</div>
	</div>
</div>

<!-- ============ About Us ============= -->

<section id="story" class="description_content">
	<div class="text-content container">
		<div class="col-md-6">
			<h1>About us</h1>
			<div class="fa fa-cutlery fa-2x"></div>
			<p class="desc-text">Restaurant is a place for simplicity. Good food, good beer, and good service. Simple is the name of the game, and we’re good at finding it in all the right places, even in your dining experience. We’re a small group from Denver, Colorado who make simple food possible. Come join us and see what simplicity tastes like.</p>
		</div>
		<div class="col-md-6">
			<div class="img-section">
			   <img th:src="@{/static/images/kabob.jpg}" width="250" height="220">
			   <img th:src="@{/static/images/limes.jpg}" width="250" height="220">
			   <div class="img-section-space"></div>
			   <img th:src="@{/static/images/radish.jpg}"  width="250" height="220">
			   <img th:src="@{/static/images/corn.jpg}"  width="250" height="220">
		   </div>
		</div>
	</div>
</section>



<section id ="beer" class="description_content">
	<div  class="beer background_content">
		<h1>Great <span>Place</span> to enjoy</h1>
	</div>
	<div class="text-content container"> 
		<div class="col-md-5">
		   <div class="img-section">
			   <img th:src="@{/static/images/beer_spec.jpg}" width="100%">
		   </div>
		</div>
		<br>
		<div class="col-md-6 col-md-offset-1">
			<h1>OUR BEER</h1>
			<div class="icon-beer fa-2x"></div>
			<p class="desc-text">Here at Restaurant we’re all about the love of beer. New and bold flavors enter our doors every week, and we can’t help but show them off. While we enjoy the classics, we’re always passionate about discovering something new, so stop by and experience our craft at its best.</p>
		</div>
	</div>
</section>


<!-- ============ Our Bread  ============= -->


<section id="bread" class=" description_content">
	<div  class="bread background_content">
		<h1>Our Breakfast <span>Menu</span></h1>
	</div>
	<div class="text-content container"> 
		<div class="col-md-6">
			<h1>OUR BREAD</h1>
			<div class="icon-bread fa-2x"></div>
			<p class="desc-text">We love the smell of fresh baked bread. Each loaf is handmade at the crack of dawn, using only the simplest of ingredients to bring out smells and flavors that beckon the whole block. Stop by anytime and experience simplicity at its finest.</p>
		</div>
		<div class="col-md-6">
			<img th:src="@{/static/images/bread1.jpg}" width="260" alt="Bread">
			<img th:src="@{/static/images/bread1.jpg}" width="260" alt="Bread">
		</div>
	</div>
</section>



<!-- ============ Featured Dish  ============= -->

<section id="featured" class="description_content">
	<div  class="featured background_content">
		<h1>Our Featured Dishes <span>Menu</span></h1>
	</div>
	<div class="text-content container"> 
		<div class="col-md-6">
			<h1>Have a look to our dishes!</h1>
			<div class="icon-hotdog fa-2x"></div>
			<p class="desc-text">Each food is handmade at the crack of dawn, using only the simplest of ingredients to bring out smells and flavors that beckon the whole block. Stop by anytime and experience simplicity at its finest.</p>
		</div>
		<div class="col-md-6">
			<ul class="image_box_story2">
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
						<li data-target="#carousel-example-generic" data-slide-to="1"></li>
						<li data-target="#carousel-example-generic" data-slide-to="2"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner">
						<div class="item active">
							<img th:src="@{/static/images/slider1.jpg}"  alt="...">
							<div class="carousel-caption">
								
							</div>
						</div>
						<div class="item">
							<img th:src="@{/static/images/slider2.jpg}" alt="...">
							<div class="carousel-caption">
								
							</div>
						</div>
						<div class="item">
							<img th:src="@{/static/images/slider3.JPG}" alt="...">
							<div class="carousel-caption">
								
							</div>
						</div>
					</div>
				</div>
			</ul>
		</div>
	</div>
</section>



<!-- ============ Social Section  ============= -->

<section class="social_connect">
	<div class="text-content container"> 
		<div class="col-md-6">
			<span class="social_heading">FOLLOW</span>
			<ul class="social_icons">
				<li><a class="icon-twitter color_animation" href="#" target="_blank"></a></li>
				<li><a class="icon-github color_animation" href="#" target="_blank"></a></li>
				<li><a class="icon-linkedin color_animation" href="#" target="_blank"></a></li>
				<li><a class="icon-mail color_animation" href="#"></a></li>
			</ul>
		</div>
		<div class="col-md-4">
			<span class="social_heading">OR DIAL</span>
			<span class="social_info"><a class="color_animation" href="tel:883-335-6524">(941) 883-335-6524</a></span>
		</div>
	</div>
</section>

<!-- ============ Reservation  ============= -->

<section  id="reservation"  class="description_content">
	<div class="featured background_content">
		<h1>Reserve a Table!</h1>
	</div>
	<div class="text-content container"> 
		<div class="inner contact">
			<!-- Form Area -->
			<div class="contact-form">
				<!-- Form -->
				<form id="contact-us" method="post" action="reserve.php">
					<!-- Left Inputs -->
					<div class="container">
						<div class="row">
							<div class="col-lg-4 col-md-6 col-xs-12">
								<!-- Message -->
								<div class="right-text">
									<h2>Hours</h2><hr>
									<p>Monday to Friday: 7:30 AM - 11:30 AM</p>
									<p>Saturday & Sunday: 8:00 AM - 9:00 AM</p>
									<p>Monday to Friday: 12:00 PM - 5:00 PM</p>
									<p>Monday to Saturday: 6:00 PM - 1:00 AM</p>
									<p>Sunday to Monday: 5:30 PM - 12:00 AM</p>
								</div>
							</div>
						</div>
					</div>
					<!-- Clear -->
					<div class="clear"></div>
				</form>
			</div><!-- End Contact Form Area -->
		</div><!-- End Inner -->
	</div>
</section>

<!-- ============ Footer Section  ============= -->

<footer class="sub_footer">
	<div class="container">
		<div class="col-md-4"><p class="sub-footer-text text-center">Copyright &copy; 2021.Company name All rights reserved.</p>
		</div>
		<div class="col-md-4"><p class="sub-footer-text text-center">Built With Care By <a href="#" target="_blank">Bia!!!</a></p></div>
	</div>
</footer>


<script type="text/javascript" src="js/jquery-1.10.2.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>     
<script type="text/javascript" src="js/jquery.mixitup.min.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>

</body>
</html>